<script setup lang="ts">
import {onMounted, Ref, ref} from "vue";
import {ElMessage} from "element-plus";
import ResumeCategoryList from "@/components/common/resumeCategoryList.vue";
import ResumeTemplateHorizontal from "@/components/common/ResumeTemplateHorizontal.vue";
import NoDataVue from "@/components/NoData/NoData.vue";
import UserInfo from "@/components/common/UserInfo.vue";
import {Userinfo} from "@/assets/ts/userinfo";
import Cover from "@/components/common/Cover.vue";
import {aiResume, templateListGet} from "@/http/m_api/template";
import {HideNavbar, showNavbar} from "@/utils/common";
import appStore from "@/store";

onMounted(() => {
  document
      .querySelector('body')
      ?.setAttribute('style', 'background-color:var(--background-color);')
})

/***************全局状态管理的方法****************/
const start = ref(false)
const height_num = ref(window.innerHeight)
const height = ref(window.innerHeight + 'px')
const main_row_margin_y = ref(window.innerHeight * 0.2 + 'px')


const user_info_ref = ref()
window.onresize = () => {
  height_num.value = window.innerHeight;
  height.value = height_num.value + 'px';
  main_row_margin_y.value = height_num.value * 0.2 + 'px';
}

const current_step = ref(0)

const userInteractGuard = new Map()
const RegistryGuard = (key: string, message: string) => {
  if (userInteractGuard.has(key)) {
    console.error(`已存在的守卫`)
  } else {
    userInteractGuard.set(key, message);
  }
}

const RemoveGuard = (key: string) => {
  if (userInteractGuard.has(key)) {
    userInteractGuard.delete(key);
  }
}

const CheckGuard = () => {
  if (userInteractGuard.size === 0) return true;
  userInteractGuard.forEach((value, key) => {
    ElMessage({
      message: value,
      type: 'error'
    })
    return false;
  })
}

/******************状态转移函数*****************/
const initialize = () => {
  isShowSkeleton.value = true;
  page.value = 1;
  previewTemplateData.value = {
    coverUrl: "",
    title: ""
  }
  previewRef = null
  selectedRef = null
  previewing.value = false
  selecting.value = false
  formValid.value = false
}

const back = () => {
  start.value = false
  showNavbar()
}
//start
const startButton = () => {
  HideNavbar()
  if (!start.value || current_step.value < 1 || current_step.value > 5) {
    current_step.value = 1
  }
  start.value = true
  setTimeout(() => {
    scroll(0, height_num.value)
    initialize()
    OnStep1Start()
  }, 100)
}
//状态转移
const TransitStep = (ori: number, ne: number, transitCheck?: Function, oriExit?: Function, newIn?: Function) => {
  if (transitCheck && !transitCheck()) return
  current_step.value = ne;
  if (oriExit) {
    oriExit()
  }
  if (newIn) {
    newIn()
  }
}

/*********************状态初始化函数********************/
const OnStep1Start = () => {
  setTimeout(getTemplateList, 500);
}

const loading = ref(false)
const OnStep3Start = () => {
  loading.value = false;
  if (userData.value && userData.value.JobIntention.length > 0) {
    selectJob.value[0] = true
  }
}

const OnStep4Start = () => {
  const timer = setInterval(() => {
    if (progress.value >= 90) {
      clearInterval(timer)
      finishGen.value = true;
    }
    progress.value += 10
  }, 200)
  aiResume({
    templateId: JSON.parse(sessionStorage.getItem('selectedTemplate') as string).id,
    post: userData.value?.JobIntention[selectJob.value.indexOf(true)],
    cityIntension: JobSetting.value.city,
    salaryIntension: JobSetting.value.salary,
    due: JobSetting.value.time
  }).then((data: any) => {
    if (data.code === 0) {
      progress.value = 100
    } else {
      ElMessage.error('出现错误，请稍后再试')
    }
  })
}

/*******************状态验证函数******************/

const Step1Check = () => {
  if (selecting.value) return true;
  else {
    ElMessage({
      type: "error",
      message: "请选择简历模板！"
    })
    return false;
  }
}

const Step2Check = () => {
  user_info_ref.value?.submitForm()
  userData.value = user_info_ref.value?.userInfo
  if (formValid.value) return true;
  if (localStorage.getItem("User-Info")) return true;
  ElMessage({
    type: "error",
    message: "信息未保存或表单填写有误！尝试保存以查看"
  })
  return false;
}

const Step3Check = () => {
  if (selectJob.value.length === 0) {
    ElMessage({
      type: "error",
      message: "请前往上一步填写至少一个岗位意向！"
    })
    return false;
  }
  for (let i = 0; i < selectJob.value.length; i++) {
    if (selectJob.value[i]) return true;
  }
  ElMessage({
    type: "error",
    message: "请选择一个岗位！"
  })
  return false;
}

/*******这部分开始为每个状态对应的属性和方法********/
/********step1 属性 及 方法*********/
const isShowSkeleton = ref<boolean>(true);
const categoryDom = ref<any>(null);
const page = ref<number>(1);
const limit = ref<number>(12);
const totalPage = ref<number>(0);
const currentPage = ref<number>(1);
const templateList = ref<any>([]);
const getTemplateList = async () => {
  isShowSkeleton.value = true;
  let filterValue = {
    categoryId: categoryDom.value.filterValue.templateStyle,
    useType: categoryDom.value.filterValue.templateUse,
    industry: categoryDom.value.filterValue.templateIndustry,
    post: categoryDom.value.filterValue.templatePost
  }
  let params = {
    page: page.value,
    size: limit.value,
    templateStatus: 1,
    ...filterValue,
    sortBy: 'id',
    sortDirection: 'ASC'
  };
  const data = await templateListGet(params);
  if (data.code === 0) {
    templateList.value = data.data.content;
    totalPage.value = data.data.totalPages;
    currentPage.value = data.data.pageable.pageNumber;
    isShowSkeleton.value = false;
  } else {
    ElMessage.error(data.message);
    isShowSkeleton.value = false;
  }
};
const categoryChange = () => {
  page.value = 1;
  templateList.value = [];
  getTemplateList();
};

let previewTemplateData = ref({
  coverUrl: "",
  title: ""
});
let previewRef: any;
let selectedRef: any;
const previewing = ref(false)
const selecting = ref(false);

const preview = (cardData: any, ref: any) => {
  previewTemplateData.value = cardData;
  previewing.value = true;
  previewRef = ref
}

const selectPreview = () => {
  if (selectedRef) {
    selectedRef.selected = false;
  }
  if (previewRef) {
    previewRef.selected = true
    selectedRef = previewRef
  }
  sessionStorage.setItem("selectedTemplate", JSON.stringify(previewTemplateData.value))
  selecting.value = true;
  previewing.value = false;
}

const changePage = () => {
  page.value = page.value % (totalPage.value) + 1;
  getTemplateList();
}

/********step2 属性 及 方法*********/
const formValid = ref(false)

/********step3 属性 及 方法*********/
const userData: Ref<Userinfo | null> = ref(null)
const selectJob: Ref<Array<boolean>> = ref([])
const JobSetting = ref({
  label1: "期望城市",
  label2: "期望薪资",
  label3: "预计到岗时间",
  city: "不限",
  salary: "4k",
  time: "1周内"
})

/********step4 属性 及 方法*********/
const finishGen = ref(false);
const progress = ref(0);

const setSelect = (index: number) => {
  for (let i = 0; i < selectJob.value.length; i++) {
    if (i === index) continue;
    selectJob.value[i] = false;
  }
}

</script>

<template>

  <!-- Preview Dialog -->
  <el-dialog
      v-model="previewing"
      :title="previewTemplateData.title"
      width="1000px"
      align-center
      class="preview-dialog"
  >
    <el-row class="preview-content">
      <el-col :offset="2" :span="18" class="preview-image-container">
        <img :src="previewTemplateData.coverUrl" :alt="previewTemplateData.title" class="preview-image"/>
      </el-col>
      <el-col :span="4" class="preview-actions">
        <el-button type="primary" class="preview-select-btn" @click="selectPreview">
          <i class="fas fa-check-circle"></i> &#12288 选择此模板
        </el-button>
        <el-button  class="preview-cancel-btn" @click="previewing=false">
          <i class="fas fa-times-circle"></i> &#12288 取消
        </el-button>
      </el-col>
    </el-row>
  </el-dialog>

  <!-- Cover Component -->
  <cover title="AI简历生成"
         :sub-title="['√ 简历模板任选', '√ 顶级 A I 算法', '√ 精准岗位匹配', '√ 免费下载导出']"
         @startButton="startButton"
  ></cover>

  <!-- Main Content -->
  <div class="resume-wizard-container" v-if="start">
    <el-row class="wizard-row">
      <!-- Left Sidebar with Steps -->
      <el-col :span="6" class="steps-sidebar">
        <div class="steps-container">
          <h2 class="steps-title">创建流程</h2>
          <el-steps direction="vertical" :active="current_step-1" class="custom-steps">
            <el-step title="选择模板" description="挑选适合您的简历模板"/>
            <el-step title="填写信息" description="完善您的个人信息" />
            <el-step title="岗位信息" description="设置您的求职意向" />
            <el-step title="AI撰写" description="智能生成专业简历" />
          </el-steps>
          <el-button class="back-button"  @click="back">
            <i class="fas fa-arrow-left"></i> 返回首页
          </el-button>
        </div>
      </el-col>

      <!-- Right Content Area -->
      <el-col :span="18" class="content-area">
        <!-- Step 1: Template Selection -->
        <el-card shadow="hover" class="wizard-card" v-if="current_step===1">
          <div class="card-header">
            <h2><i class="fas fa-palette"></i> 选择模板</h2>
            <p class="card-subtitle">挑选一个适合您职业发展的专业模板</p>
          </div>
          <div style="max-height: 500px; overflow-y: auto">
            <resume-category-list ref="categoryDom" @category-change="categoryChange" class="category-list"></resume-category-list>

            <div class="templates-container">
              <resume-template-horizontal
                  v-if="templateList.length && !isShowSkeleton"
                  :template-list="templateList"
                  @preview="preview">
              </resume-template-horizontal>

              <div v-if="!templateList.length && !isShowSkeleton" class="no-data-container">
                <no-data-vue class="no-data-image"></no-data-vue>
                <p class="no-data-text">暂无符合条件的模板</p>
              </div>

              <!-- Loading Skeletons -->
              <div v-if="isShowSkeleton" class="skeleton-container">
                <el-skeleton class="template-skeleton" v-for="index in 4" :key="index" animated>
                  <template #template>
                    <el-skeleton-item variant="image" class="skeleton-image"/>
                    <div class="skeleton-content">
                      <el-skeleton-item variant="p" style="width: 50%"/>
                      <div class="skeleton-footer">
                        <el-skeleton-item variant="text" style="margin-right: 16px"/>
                        <el-skeleton-item variant="text" style="width: 30%"/>
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </div>
            </div>
          </div>


          <div class="card-actions">
            <el-button  class="refresh-btn" @click="changePage">
              <i class="fas fa-sync-alt"></i> 换一换
            </el-button>
            <el-button type="primary" class="next-btn" @click="TransitStep(1,2, Step1Check)">
              下一步 <i class="fas fa-arrow-right"></i>
            </el-button>
          </div>
        </el-card>

        <!-- Step 2: User Information -->
        <el-card shadow="hover" class="wizard-card" v-if="current_step===2">
          <div class="card-header">
            <h2><i class="fas fa-user-edit"></i> 填写信息</h2>
            <p class="card-subtitle">完善您的个人信息，打造专业简历</p>
          </div>

          <div class="user-info-container">
            <user-info ref="user_info_ref" :card="true" @confirm="(valid:boolean)=>{formValid = valid}"></user-info>
          </div>

          <div class="card-actions">
            <el-button  class="back-btn" @click="TransitStep(2,1)">
              <i class="fas fa-arrow-left"></i> 上一步
            </el-button>
            <el-button type="primary" class="next-btn" @click="TransitStep(2,3, Step2Check, undefined, OnStep3Start);">
              下一步 <i class="fas fa-arrow-right"></i>
            </el-button>
          </div>
        </el-card>

        <!-- Step 3: Job Information -->
        <el-card shadow="hover" class="wizard-card" v-if="current_step===3">
          <div class="card-header">
            <h2><i class="fas fa-briefcase"></i> 完善岗位信息</h2>
            <p class="card-subtitle">选择您的求职意向和期望</p>
          </div>

          <div class="job-section">
            <h3 class="section-title">选择岗位意向</h3>
            <div class="job-list">
              <div v-if="loading" class="loading-text">加载中...</div>
              <div v-else-if="userData?.JobIntention.length===0" class="no-jobs-warning">
                <i class="fas fa-exclamation-triangle"></i>
                请前往上一步填写至少一个岗位意向！
              </div>
              <div v-else class="job-options">
                <div v-for="(item, index) in userData?.JobIntention" :key="index" class="job-option">
                  <el-switch
                      @change="setSelect(index)"
                      v-model="selectJob[index]"
                      active-color="#64b5f6"
                      class="job-switch"
                  ></el-switch>
                  <span class="job-title">{{ item }}</span>
                </div>
              </div>
            </div>

            <h3 class="section-title">求职偏好设置</h3>
            <div class="job-preferences">
              <div class="preference-item">
                <label class="preference-label">{{ JobSetting.label1 }}</label>
                <el-input v-model="JobSetting.city" placeholder="请输入期望城市" class="preference-input">
                  <template #prefix><i class="fas fa-map-marker-alt"></i></template>
                </el-input>
              </div>

              <div class="preference-item">
                <label class="preference-label">{{ JobSetting.label2 }}</label>
                <el-input v-model="JobSetting.salary" placeholder="请输入期望薪资" class="preference-input">
                  <template #prefix><i class="fas fa-money-bill-wave"></i></template>
                </el-input>
              </div>

              <div class="preference-item">
                <label class="preference-label">{{ JobSetting.label3 }}</label>
                <el-input v-model="JobSetting.time" placeholder="请输入到岗时间" class="preference-input">
                  <template #prefix><i class="fas fa-calendar-alt"></i></template>
                </el-input>
              </div>
            </div>
          </div>

          <div class="card-actions">
            <el-button class="back-btn" @click="TransitStep(3,2)">
              <i class="fas fa-arrow-left"></i> 上一步
            </el-button>
            <el-button type="primary" class="next-btn" @click="TransitStep(3,4, Step3Check, undefined, OnStep4Start)">
              下一步 <i class="fas fa-arrow-right"></i>
            </el-button>
          </div>
        </el-card>

        <!-- Step 4: AI Generation -->
        <el-card shadow="hover" class="wizard-card" v-if="current_step===4">
          <div class="card-header">
            <h2><i class="fas fa-robot"></i> AI撰写</h2>
            <p class="card-subtitle">智能生成专业简历内容</p>
          </div>

          <div class="ai-generation-container">
            <div v-if="!finishGen" class="generation-progress">
              <div class="progress-icon">
                <i class="fas fa-cogs fa-spin"></i>
              </div>
              <el-progress
                  :percentage="progress"
                  :stroke-width="12"
                  :format="(percentage:any) => `${percentage}%`"
                  class="progress-bar"
              ></el-progress>
              <p class="progress-text">AI正在为您撰写简历，请耐心等待...</p>
            </div>

            <div v-else class="generation-complete">
              <div class="complete-icon">
                <i class="fas fa-check-circle"></i>
              </div>
              <h3 class="complete-title">简历生成请求已提交！</h3>
              <p class="complete-text">预计5分钟后生成完毕，您可以在个人中心查看</p>
            </div>
          </div>

          <div class="card-actions">
            <el-button type="primary" class="finish-btn" @click="back">
              <i class="fas fa-check"></i> 完成
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

// Main container styles
.resume-wizard-container {
  height: 100vh;
  background-color: #f8f9fa;
  padding: 20px 0;
}

.wizard-row {
  max-width: 1400px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
}

// Steps sidebar styles
.steps-sidebar {
  background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
  height: v-bind(height);
  border-right: 1px solid #e0e4e8;

  .steps-container {
    padding: 40px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .steps-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
  }

  .custom-steps {
    flex: 1;

    :deep(.el-step__icon) {
      background-color: #fff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    :deep(.el-step__title) {
      font-weight: 600;
      font-size: 1.1rem;
    }

    :deep(.el-step__description) {
      font-size: 0.9rem;
      color: #5a6c7d;
    }

    :deep(.is-process) {
      .el-step__icon {
        background-color: #64b5f6;
        color: white;
      }

      .el-step__title, .el-step__description {
        color: #64b5f6;
      }
    }

    :deep(.is-finish) {
      .el-step__icon {
        background-color: #4caf50;
        color: white;
      }
    }
  }

  .back-button {
    margin-top: 40px;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #dcdfe6;

    &:hover {
      background-color: #f2f6fc;
      transform: translateY(-2px);
    }
  }
}

// Content area styles
.content-area {
  height: v-bind(height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

// Card styles
.wizard-card {
  width: 100%;

  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
  }

  .card-header {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaedf0;

    h2 {
      font-size: 1.8rem;
      color: #2c3e50;
      margin-bottom: 10px;
      font-weight: 600;

      i {
        color: #64b5f6;
        margin-right: 10px;
      }
    }

    .card-subtitle {
      color: #5a6c7d;
      font-size: 1rem;
      margin: 0;
    }
  }

  .card-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eaedf0;

    .back-btn, .refresh-btn {
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
      }
    }

    .next-btn, .finish-btn {
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      border: none;
      padding: 12px 30px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.2);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 181, 246, 0.3);
      }
    }
  }
}

// Template selection styles
.category-list {
  margin-bottom: 30px;
}


.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;

  .no-data-image {
    width: 150px;
    margin-bottom: 20px;
  }

  .no-data-text {
    color: #5a6c7d;
    font-size: 1.1rem;
  }
}

.skeleton-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;

  .template-skeleton {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .skeleton-image {
      width: 100%;
      height: 240px;
      border-radius: 8px 8px 0 0;
    }

    .skeleton-content {
      padding: 14px;
    }

    .skeleton-footer {
      display: flex;
      align-items: center;
      margin-top: 30px;
    }
  }
}

// Preview dialog styles
.preview-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #eaedf0;

    .el-dialog__title {
      font-size: 1.3rem;
      font-weight: 600;
      color: #2c3e50;
    }
  }

  .preview-content {
    padding: 20px 0;
  }

  .preview-image-container {
    display: flex;
    justify-content: center;

    .preview-image {
      max-width: 100%;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
  }

  .preview-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;

    .preview-select-btn {
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.2);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 181, 246, 0.3);
      }
    }

    .preview-cancel-btn {
      border-radius: 8px;
      padding: 12px 20px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        background-color: #f2f6fc;
        transform: translateY(-2px);
      }
    }
  }
}

// User info container styles
.user-info-container {
  height: 60vh;
  overflow-y: auto;
  padding: 0 20px;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

// Job section styles
.job-section {
  padding: 0 20px;

  .section-title {
    font-size: 1.2rem;
    color: #2c3e50;
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaedf0;
  }

  .job-list {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;

    .loading-text {
      text-align: center;
      font-weight: 600;
      color: #5a6c7d;
      padding: 20px 0;
    }

    .no-jobs-warning {
      color: #e74c3c;
      text-align: center;
      padding: 20px 0;
      font-weight: 500;

      i {
        margin-right: 8px;
      }
    }

    .job-options {
      display: flex;
      flex-direction: column;
      gap: 15px;

      .job-option {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }

        .job-switch {
          margin-right: 15px;
        }

        .job-title {
          font-weight: 500;
          color: #2c3e50;
        }
      }
    }
  }

  .job-preferences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;

    .preference-item {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .preference-label {
        font-weight: 500;
        color: #2c3e50;
        font-size: 0.95rem;
      }

      .preference-input {
        :deep(.el-input__wrapper) {
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;

          &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
          }

          &.is-focus {
            box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
          }
        }

        :deep(.el-input__prefix) {
          color: #64b5f6;
          margin-right: 8px;
        }
      }
    }
  }
}

// AI generation styles
.ai-generation-container {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;

  .generation-progress {
    width: 100%;
    max-width: 600px;
    text-align: center;

    .progress-icon {
      font-size: 3rem;
      color: #64b5f6;
      margin-bottom: 30px;
    }

    .progress-bar {
      margin-bottom: 20px;

      :deep(.el-progress-bar__outer) {
        border-radius: 10px;
        background-color: #e9ecef;
      }

      :deep(.el-progress-bar__inner) {
        border-radius: 10px;
        background: linear-gradient(90deg, #64b5f6, #42a5f5);
      }

      :deep(.el-progress__text) {
        color: #2c3e50;
        font-weight: 600;
      }
    }

    .progress-text {
      color: #5a6c7d;
      font-size: 1.1rem;
    }
  }

  .generation-complete {
    text-align: center;

    .complete-icon {
      font-size: 4rem;
      color: #4caf50;
      margin-bottom: 20px;
    }

    .complete-title {
      font-size: 1.5rem;
      color: #2c3e50;
      margin-bottom: 15px;
    }

    .complete-text {
      color: #5a6c7d;
      font-size: 1.1rem;
    }
  }
}

// Responsive styles
@media (max-width: 992px) {
  .wizard-row {
    flex-direction: column;
  }

  .steps-sidebar {
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e0e4e8;

    .steps-container {
      padding: 20px;
    }
  }

  .content-area {
    min-height: auto;
    padding: 20px;
  }

  .job-preferences {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .card-actions {
    flex-direction: column;

    .back-btn, .refresh-btn, .next-btn, .finish-btn {
      width: 100%;
    }
  }

  .preview-dialog {
    .preview-content {
      flex-direction: column;
    }

    .preview-actions {
      flex-direction: row;
      justify-content: center;
      margin-top: 20px;
    }
  }
}
</style>